<!DOCTYPE html>
<html>
<head>
	<title>列表页</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="format-detection" content="telephone =no">
	<link rel="stylesheet" href='css/common.css'>
	<link rel="stylesheet" href='css/prd.css'>
	<link rel="stylesheet" href='css/swiper-3.4.2.min.css'>
	<script type="text/javascript" src="js/flexible.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/com_extend.js"></script>
	<script type="text/javascript" src="js/zepto.picLazyLoad.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
</head>
<body>
<div class="container">
	<!--头部-->
	<header class="com_header prd_header">
		<a href="javascript:;" class="go_back" onclick="history.back()"></a>
		<span class="prd_title">列表页</span>
		<div class="search">
			<form>
				<label>
					<input type="text" class="search_inp" placeholder="请输入关键词">
					<input type="submit" class="sub" value="">
				</label>
			</form>
		</div>
	</header>
	<!--列表页主要内容-->
	<div class="prdlist_con">
		<div class="prd_menu_tit">
			<!--分类-->
			<div class="prdlist_menu">
				<div class="menu_list">
					<a href="#" class="cur">
						<i class="icon_1"></i>
						<span>客餐厅</span>
					</a>
					<a href="#">
						<i class="icon_2"></i>
						<span>卧室</span>
					</a>
					<a href="#">
						<i class="icon_3"></i>
						<span>厨房</span>
					</a>
					<a href="#">
						<i class="icon_4"></i>
						<span>书房</span>
					</a>
					<a href="#">
						<i class="icon_5"></i>
						<span>儿童房</span>
					</a>
					<a href="#">
						<i class="icon_6"></i>
						<span>厨电</span>
					</a>
				</div>
			</div>
			<div class="menu_ad_list">
				<!--针对每个分类一张广告图-->
				<a href="#"><img src="images/demo/640_200.png"></a>
				<a href="#"><img src="images/demo/640_200.png"></a>
				<a href="#"><img src="images/demo/640_200.png"></a>
				<a href="#"><img src="images/demo/640_200.png"></a>
				<a href="#"><img src="images/demo/640_200.png"></a>
			</div>
			<!--参数选择-->
			<div class="param">
				<div class="param_choose">
					<div class="param_style">
						<div class="param_tit" data-value="0">
							<span>风格</span>
							<i></i>
						</div>
					</div>
					<div class="param_fun">
						<div class="param_tit" data-value="1">
							<span>功能</span>
							<i></i>
						</div>
					</div>
					<div class="param_area">
						<div class="param_tit" data-value="2">
							<span>面积</span>
							<i></i>
						</div>
					</div>
					<div class="param_price">
						<div class="param_tit" data-value="3">
							<span>价格</span>
							<i></i>
						</div>
					</div>
				</div>
				<div class="param_list">
					<div class="style_list">
						<a href="#">不限</a>
						<a href="#">现代</a>
						<a href="#">欧式</a>
						<a href="#">实用主义</a>
					</div>
					<div class="fun_list">
						<a href="#">所有</a>
						<a href="#">电视柜组合</a>
						<a href="#">沙发茶几组合</a>
						<a href="#">餐桌组合</a>
						<a href="#">鞋柜组合</a>
						<a href="#">吧台组合</a>
						<a href="#">装饰柜组合</a>
					</div>
					<div class="area_list" >
						<a href="#">不限</a>
						<a href="#">25m以下</a>
						<a href="#">25m-30m</a>
						<a href="#">35m-38m</a>
						<a href="#">38m以上</a>
					</div>
					<div class="price_list">
						<a href="#">不限</a>
						<a href="#">10000元以下</a>
						<a href="#">10000元-12000元</a>
						<a href="#">12000元-14000元</a>
						<a href="#">14000元-16000元</a>
						<a href="#">16000以上</a>
					</div>
				</div>
			</div>
		</div>
		<!--产品显示-->
		<div class="prd_show_list">
			<div class="show_left">
				<a href="#">
					<img src="images/demo/316_237.jpg">
					<span>美式二居室</span>
					<em class="price">¥ 10000元-12000元</em>
				</a>
				<a href="#">
					<img src="images/demo/316_237.jpg">
					<span>美式二居室</span>
					<em class="price">¥ 10000元-12000元</em>
				</a>
				<a href="#">
					<img src="images/demo/316_237.jpg">
					<span>美式二居室</span>
					<em class="price">¥ 10000元-12000元</em>
				</a>
			</div>
			<div class="show_right">
				<a href="#">
					<img src="images/demo/316_237.jpg">
					<span>美式二居室</span>
					<em class="price">¥ 10000元-12000元</em>
				</a>
				<a href="#">
					<img src="images/demo/316_237.jpg">
					<span>美式二居室</span>
					<em class="price">¥ 10000元-12000元</em>
				</a>
				<a href="#" class="list_ad">
					<img src="images/demo/316_442.png">
				</a>
				<a href="#">
					<img src="images/demo/316_237.jpg">
					<span>美式二居室</span>
					<em class="price">¥ 10000元-12000元</em>
				</a>
			</div>
		</div>
		<!--右侧分类弹框-->
		<div class="prd_menu_pop">
			<div class="bg"></div>
			<div class="menu_pop_list">
				<a href="#" class="icon_1" data-value="客餐厅"></a>
				<a href="#" class="icon_2" data-value="卧室"></a>
				<a href="#" class="icon_3" data-value="厨房"></a>
				<a href="#" class="icon_4" data-value="书房"></a>
				<a href="#" class="icon_5" data-value="儿童房"></a>
				<a href="#" class="icon_6" data-value="厨电"></a>
			</div>
			<a href="javascript:;" class="prd_menu_close"></a>
		</div>
		<!--选择按钮-->
		<div class="menu_btn">
			<a href="javascript:;" class="prd_menu_btn"></a>
			<a href="#" class="go_top"></a>
		</div>
	</div>
	<!--尾部-->
	<footer class="com_footer">
		<div class="footer_info_top">
			<span class="link">
				<a href="#">关于我们</a>
				|
				<a href="#">定制流程</a>
				|
				<a href="#">联系客服</a>
			</span>
			<address>
				<p>广东皮阿诺科学艺术家居股份有限公司</p>
				<p>联系电话：<span>400-6787-819</span></p>
			</address>
		</div>
		<div class="footer_info_bottom">
			<p>
				<a href="#">触屏版</a> 
				<a href="#">电脑版</a>  
			</p>
			<p>粤ICP备05019711号© 2012-2017</p>
		</div>
		<!--底部导航-->
		<nav class="com_nav">
			<div>
				<a href="javascript:;">
					<i class="icon_1"></i>
					<span>首页</span>
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<i class="icon_2"></i>
					<span>分类</span>
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<i class="icon_3"></i>
					<span>在线咨询</span>
				</a>
			</div>
			<div >
				<a href="javascript:;">
					<i class="icon_4"></i>
					<span>免费设计报名</span>
				</a>
			</div>
		</nav>
	</footer>
</div>
</body>
</html>
<script type="text/javascript">
	$(function(){
		/*点击分类*/
		var $param_list=$(".param_list").find('div');
		$(".param_tit").tap(function(){
			var pindex=$(this).data('value');
			$param_list.css('display','none').eq(pindex).css('display','flex')
		})
		/*点击菜单分类按钮*/
		$(".prd_menu_btn").tap(function(){
			$(".prd_menu_pop").addClass('menu_pop_move');
		})
		$(".prd_menu_close").tap(function(){
			$(".prd_menu_pop").removeClass('menu_pop_move');
		})
		/*选中标题*/
		$(".param_choose > div").tap(function(){
			$(this).addClass('cur').siblings().removeClass('cur');
		})
	})
	
</script>